<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            -webkit-user-select: none;
        }
        body {
            padding: 0;
            margin: 0;
            border: none;
            overflow: hidden;
        }
        table {
            font-size: 15px;
            font-family: verdana,arial,sans-serif;
            /*font-size:11px;*/
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
            width: 100%;
        }
        table th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
            text-align: center;
        }
        table td a {
            cursor: pointer;
            text-decoration: underline;
            color: #03a9f4;
        }
        .menu {
            display: none;
            height: 20px;
        }
        .menu div {
            font-size: 15px;
            padding: 0 5px;
            line-height: 20px;
            display: inline-block;
            cursor: pointer;
        }

        nav {
            width: 100%;
            height: 40px;
            /*background-color: #fff;*/
        }

        nav p {
            font-family: arial;
            font-size: 24px;
            text-transform: uppercase;
            line-height: 55px;
            padding: 0 20px;
            float: left;
        }

        nav ul {
            /*float: left;*/
            /*right: 0;*/
            left: auto;
            padding: 0;
            margin: 0;
        }

        nav ul li {
            float: left;
            list-style: none;
            position: relative;
            height: 40px;
            background: #106180;
        }

        nav ul li a {
            display: block;
            font-size: 14px;
            padding: 12px 13px;
            text-decoration: none;
            color: white;
            box-sizing: border-box;
            height: 40px;
        }

        nav ul li ul {
            display: none;
            position: absolute;
            background-color: #c4c4c4;
            color: black;
        }

        nav ul li:hover a {
            background: #c4c4c4;
            color: black;
        }
        nav ul li:hover ul {
            display: block;
        }

        nav ul li ul li {
            width: 160px;
        }

        nav ul li ul li a:hover {
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
<canvas id="canvas" style="position:fixed;z-index: 1;opacity: 0.8;width: 100%;height: 100%;"></canvas>
<div style="width: 100vw;height: 100vh;position: fixed;z-index: 2;">
    <div>
        <nav>
            <ul>
                <li><a href="#" style="-webkit-app-region: drag;">点此拖拽</a></li>

                <li>
                    <a href="#" onclick="appAction.quit();">退出</a>
                </li>
                <li>
                    <a href="#">页面操作</a>
                    <ul>
                        <li><a href="#" onclick="location.reload();">回到首页</a></li>
                        <li><a href="#" onclick="webviewAction.goBack()">(返回)上一页</a></li>
                        <li><a href="#" onclick="webviewAction.goForward()">下一页</a></li>
                    </ul>
                </li>
                <li><a href="#">服务</a>
                    <ul>
                        <li><a href="#" id="serverCheck">没有启动服务</a></li>
                        <li><a><div></div><div style="float:left;">端口</div><input id="port" value="8081" style="
    height: 19px;
    border: none;
    padding: 0;
    margin: 2px 4px;
    width: 50px;
    text-align: center;
    line-height: 23px;
    float: left;
"></a></li>
                    </ul>
                </li>
                <li><a href="#">窗口</a>
                    <ul>
                        <li><a href="#" onclick="appAction.toResize('maximize')">最大化</a></li>
                        <li><a href="#" onclick="appAction.toResize('unmaximize')">取消最大化</a></li>
                        <li><a href="#" onclick="appAction.toResize('minimize')">最小化</a></li>
                        <li><a href="#" onclick="appAction.toResize('setFullScreen')">全屏</a></li>
                        <li><a href="#" onclick="appAction.toResize('toTray')">最小化到托盘</a></li>
                    </ul>
                </li>
                <li style="float: right;"><a href="#" style="-webkit-app-region: drag;">点此拖拽</a></li>
            </ul>
        </nav>
    </div>
    <!--
    <div class="menu">
        <div style="-webkit-app-region: drag;">点此拖拽</div>
        <div onclick="appAction.quit();">退出</div>
        <div onclick="location.reload();">回到首页</div>
        <div onclick="webviewAction.goBack()">回退</div>
        <div onclick="webviewAction.goForward()">前进</div>
        <div><div></div><div style="float:left;">端口</div><input id="port" value="8081" style="
    height: 19px;
    border: none;
    padding: 0;
    margin: 2px 4px;
    width: 50px;
    text-align: center;
    line-height: 23px;
    float: left;
"></div>
        <div id="serverCheck">没有启动服务</div>
        <div onclick="showHelp()">使用文档</div>
        <div onclick="appAction.toResize('maximize')">最大化</div>
        <div onclick="appAction.toResize('unmaximize')">取消最大化</div>
        <div onclick="appAction.toResize('minimize')">最小化</div>
        <div onclick="appAction.toResize('setFullScreen')">全屏</div>
        <div onclick="appAction.toResize('toTray')">最小化到托盘</div>
        <div style="-webkit-app-region: drag;float: right;">点此拖拽</div>
    </div>
    -->
    <table id="table" style="display: table;max-height: calc(100vh - 40px);">
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>说明</th>
            <th>动作</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
    <webview id="webview" src="www.baidu.com" style="display:none; width:100vw; height:calc(100vh - 40px);"></webview>
    <div style="display: none;height: 100vh;height: 100vw">
        <div><span style="color:blue;">打开</span> 将在该窗口中打开对应页面</div>
        <div><span style="color:blue;">服务</span> 将在浏览器中打开，可用于使用谷歌浏览器的翻译功能。</div>
    </div>
</div>
</body>
<script src="ani.js"></script>
<script>
    const { ipcRenderer } = nodeRequire('electron');
    const path = nodeRequire('path');
    let serverStart = false;
    let port = 8080;

    ipcRenderer.on('asynchronous-reply', (event, arg) => {
        if ("arg" in arg) {
            switch (arg.arg.event) {
                case "apps":
                    renderTable(arg.msg);
                    break;
                case "process":
                    process = arg.msg;
                    break;
                case "checkServer":
                    if (arg.msg) {
                        document.getElementById('port').setAttribute('disabled',true);
                        serverStart = true;
                        document.getElementById('serverCheck').innerHTML = "<span style='background: yellow;color: red;'>已启动服务</span>";
                    }
                    break;
            }
        }
        window.rep = arg;
    });

    let table = null;
    let tbody = null;
    let webview = null;
    let process = null;
    let apps = {};
    let webviewAction = {
        goBack() {
            if (webview.canGoBack()) {
                webview.goBack();
            }
        },
        goForward() {
            if (webview.canGoForward()) {
                webview.goForward();
            }
        }
    };
    let appAction = {
        quit() {
            let check = confirm("确定退出？退出将同时关闭服务！");
            if (check) {
                ipcRenderer.send('asynchronous-message','quit');
            }
        },
        openDevTool() {
            ipcRenderer.send('asynchronous-message','devTool');
        },
        toResize(type) {
            ipcRenderer.send('asynchronous-message', {
                event: 'resize',
                type: type
            });
        }
    };
    window.setPort = function() {

    };
    window.onload = function () {
        webview = document.getElementById('webview');
        tbody = document.getElementById('tbody');
        table = document.getElementById('table');
        ipcRenderer.send('asynchronous-message','process');
        ipcRenderer.send('asynchronous-message', "apps");
        window.addEventListener('resize', window.onResize);
        // window.ani.init();
        window.ani.qi();
        setInterval(() => {
            ipcRenderer.send('asynchronous-message','checkServer');
        },1000);
    };
    window.openApp = appName => {
        // ipcRenderer.send('asynchronous-message', {
        //     event: 'loadApp',
        //     app: appName
        // });
        if (appName in apps) {
            table.style.display = 'none';
            let newUrl = path.join(process.resourcesPath,apps[appName].file,apps[appName].index);
            webview.loadURL(newUrl);
            webview.style.display = 'flex';
        }
    };
    window.openAppAsBrowser = appName => {
        if (appName in apps) {
            let portOk = true;
            let toStartServer = () => {
                ipcRenderer.send('asynchronous-message', {
                    event: 'openAppForBrowser',
                    app: appName,
                    port: document.getElementById('port').value
                });
            };
            if (serverStart) {
                toStartServer();
            } else {
                testPort(function (ok) {
                    if (ok) {
                        toStartServer();
                    } else {
                        alert("端口被占用");
                    }
                });
            }
        }
    };
    renderTable = _apps => {
        apps = _apps;
        let innerHTML = "";
        let ind = 1;
        for (let i in apps) {
            innerHTML += `<tr>
                            <td>#${ind}</td>
                            <td>${apps[i].name}</td>
                            <td>${apps[i].descript}</td>
                            <td><a onclick="openApp('${i}');">打开</a>&nbsp;&nbsp;&nbsp;<a onclick="openAppAsBrowser('${i}');">服务</a></td>
                        </tr>`;
            ind++;
        }
        tbody.innerHTML = innerHTML;
    };
    // ipcRenderer.send('asynchronous-message', 'ping')

    window.testPort = function (cb) {
        fetch(`http://localhost:${document.getElementById('port').value}`)
            .then(_ => {
                // 端口被占用
                cb(false);
            }).catch(e => {
            cb(true);
        });
    };

    window.showHelp = function () {
        alert(`打开：将在该窗口中打开对应页面\r\n服务：将在浏览器中打开，可用于使用谷歌浏览器的翻译功能。`);
    };
</script>
</html>